<!-- 登录页面组件 -->
<template>
    <div>
    <h1>欢迎来到登录页</h1>
        <div class="login">
            <div class="login_left">
                
            </div>
            <div class="login_right">
                <div class="login_box">
                    <div>
                        账号：<input type="text" v-model="count">
                    </div>
                    <div>
                        密码：<input type="password" v-model="password">
                    </div>
                    <div>
                        <span>
                             记住密码
                            <input type="checkbox" :checked="checkOption" /> 
                        </span>
                        <button @click="handleLogin()">登录</button>
                        <button>注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import request from '../../utils/index.js'

export default {
  data() {
      return{
        count:'18708418879',
        password: 'cy1004243213..',
        checkOption:1
      }
  },
  methods:{
       handleLogin() {
          //在此处进行前端验证，通过才发起请求给后端
          
          request({
              url:'/login/cellphone',
              method:"GET",
              params: {
                phone: this.count,
                password: this.password
              }
          }).then(res => {
              console.log("成功！")
              console.log(res)
              if(res.data.code == 200){
                  window.alert("登录成功")
                  //保存cookie值,对于无跨域
                  window.sessionStorage.setItem("user_info", res.data.token)
                  //对于有跨域的，使用token
                  //路由跳转
                  this.$router.push('/manager')
              }else if(res.data.code == 502){
                window.alert("密码错误！")
              }else{
                  window.alert("请输入正确的账号！")
              }
          }).catch(err => {
              console.log("失败！")
              console.log(err)
              window.alert("网络连接失败！")
          })
      }
  }

}

</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    h1{
        height: 88px;
        line-height: 88px;
        width: 100%;
        color: orange;
        text-align: center;
        margin: 0 auto;
        background-color: bisque;
        border-color: 1px solid red;
    }
    .login{
        display: flex;
        height: 600px;
        width: 100%;
        min-width: 1200px;
    }
    .login_left{
        flex: 65%;
        background-color: aqua;
    }
    .login_right{
        flex: 35%;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login_right .login_box{
        width: 70%;
        height: 50%;
        background-color: #fff;
        position: relative;
        border-radius: 30px;
    }
    /* 三角形装饰 */
    .login_right .login_box::before{
        content: '';
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        transform: rotate(45deg);
        background-color: #fff;
        left: 45%;
        top: -25px;
        
    }
    .login_right .login_box input{
        display: inline-block;
        width: 65%;
        padding: 10px 15px;
        border-radius: 25px;
        background-color: aqua;
        font-size: 25px;
        color: orangered;
        margin: 0 auto;
        overflow: hidden;
    }
    .login_box div:first-child{
        margin-top: 15%;
    }
    .login_box div:nth-child(2){
        margin-top: 5%;
    }
    .login_box div:last-child{
        margin-top: 5%;
    }
    .login_box > div{
       text-align: center;
    }
    .login_box div button {
       margin-left: 25px;
       width: 40px;
       height: 35px;
       line-height: 35px;
       border-radius: 10px;
    }
    .login_box div span{
        float: left;
        font-size: 10px;
        width: 105px;
    }
</style>